<template>
  <f7-page bg-color="white">
    <f7-navbar title="选择常运货物" back-link="返回"></f7-navbar>
    <div class="list media-list">
      <ul>
        <li v-for="(item,index) in goodlists" :key="index">
          <label class="item-checkbox item-content">
            <input type="checkbox" value="1" v-model="item.select" />
            <i class="icon icon-checkbox"></i>
            <div class="item-inner">
              <img class="float-left" :src="item.file" width="50" height="50">
              <h4 class="float-left no-margin margin-top margin-left">{{item.chn}}</h4>
            </div>
          </label>
        </li>
      </ul>
    </div>
    <f7-block>
      <f7-button big fill @click="completeReg()"> 选好了,完成注册</f7-button>
    </f7-block>
  </f7-page>
</template>

<script>
export default {
  data () {
    return {
      goodlists: [],
      selects: []
    }
  },
  methods: {
    async getGoods () {
      let getGoodsRep = await this.ProductService.getProductType({ type: 'registered' })
      if (getGoodsRep.data.status === 'success') {
        this.goodlists = getGoodsRep.data.data
      };
    },
    async completeReg () {
      for (let item of this.goodlists) {
        if (item.select) {
          this.selects.push(item.chn)
        }
      }
      let completeRep = await this.AccountService.completeReg({ transport: this.selects })
      if (completeRep.data.status === 'success') {
        this.$f7.router.navigate({ url: '/trade/' })
      };
    }
  },
  mounted () {
    this.getGoods()
  }
}
</script>

<style scoped>
.ios .list {
  margin: 0;
}
</style>
